<template>
  <!-- 对话框表单 -->
  <!-- 建议使用 Prettier 格式化代码 -->
  <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
  <el-dialog class="ba-operate-dialog"
             :close-on-click-modal="false"
             :model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
             @close="baTable.toggleForm"
             width="50%">
    <template #header>
      <div class="title"
           v-drag="['.ba-operate-dialog', '.el-dialog__header']"
           v-zoom="'.ba-operate-dialog'">
        {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
      </div>
    </template>
    <el-scrollbar v-loading="baTable.form.loading"
                  class="ba-table-form-scrollbar">
      <div class="ba-operate-form"
           :class="'ba-' + baTable.form.operate + '-form'"
           :style="config.layout.shrink ? '':'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
        <el-form v-if="!baTable.form.loading"
                 ref="formRef"
                 @submit.prevent=""
                 @keyup.enter="baTable.onSubmit(formRef)"
                 :model="baTable.form.items"
                 :label-position="config.layout.shrink ? 'top' : 'right'"
                 :label-width="baTable.form.labelWidth + 'px'">
          <FormItem :label="t('checkbill.checkbill.name')"
                    type="string"
                    v-model="baTable.form.items!.name"
                    prop="name"
                    :placeholder="t('Please input field', { field: t('checkbill.checkbill.name') })" />
          <FormItem :label="t('checkbill.checkbill.type')"
                    type="select"
                    v-model="baTable.form.items!.type"
                    prop="type"
                    :data="{ content: { '0': '请选择','1': '顺丰', '2': '全球无忧', '3': '查询签收状态', '4': '核对SKU数量' } }"
                    :placeholder="t('Please select field', { field: '状态'})" />
          <!-- <FormItem :label="t('checkbill.checkbill.files')"
                    type="files"
                    v-model="baTable.form.items!.files"
                    prop="files" /> -->
          <el-form-item :label="t('checkbill.checkbill.files')">
            <el-upload ref="upload"
                       class="upload-demo"
                       v-model:file-list="fileList"
                       :limit="1"
                       @change="onUpload"
                       :on-exceed="handleExceed"
                       :auto-upload="false">
              <template #trigger>
                <el-button type="primary">选择文件</el-button>
              </template>
              <template #tip>
                <div class="el-upload__tip text-red">
                  限制上传1个文件，新文件会覆盖旧文件。
                </div>
              </template>
            </el-upload>
          </el-form-item>
          <FormItem :label="t('checkbill.checkbill.status')"
                    type="radio"
                    v-model="baTable.form.items!.status"
                    prop="status"
                    :data="{ content: { success: '成功', fail: '失败', working: '运行中' } }"
                    :placeholder="t('Please select field', { field: t('checkbill.checkbill.status') })" />
          <FormItem :label="t('checkbill.checkbill.files_completed')"
                    type="string"
                    v-model="baTable.form.items!.files_completed"
                    prop="files_completed"
                    :placeholder="t('Please input field', { field: t('checkbill.checkbill.files_completed') })" />
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
        <el-button @click="baTable.toggleForm()">{{ t('Cancel') }}</el-button>
        <el-button v-blur
                   :loading="baTable.form.submitLoading"
                   @click="baTable.onSubmit(formRef)"
                   type="primary">
          {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { inject, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useConfig } from '/@/stores/config'
import { genFileId, ElMessage } from 'element-plus'
import type { UploadInstance, UploadRawFile, FormInstance, UploadUserFile } from 'element-plus'
import type baTableClass from '/@/utils/baTable'
import { fileUpload } from '/@/api/backend/checkbill/checkbill'

const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()
const fileList = ref<UploadUserFile[]>([])
const upload = ref<UploadInstance>()
const handleExceed = (files:any) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}
const onUpload = (file:any) => {
    let fd = new FormData()
    fd.append('file', file.raw)
    console.log(file)
    return fileUpload(fd, { id: baTable.form.items!.id }).then((res) => {
        let newFile:any = fileList.value.find((v:any) => v.uid == file.uid)
        if (res.code == 200) {
            newFile.status = 'success'
            ElMessage ({
                type: 'success',
                message: res.msg,
            })
        } else {
            newFile.status = 'fail'
            ElMessage ({
                type: 'error',
                message: '刷单上传失败',
            })
        }
    })  
}

watch(
    () => baTable.form.operate,
    (newVal) => {
        console.log(baTable)
        fileList.value = []
    }
)
</script>

<style scoped lang="scss"></style>
